<template>
  <div class="device pad">
    <div class="head">
      <span>设备管理</span>
    </div>
    <div
      class="m-t-b"
      style="display: flex; justify-content: space-between;"
    >
      <div>
        <el-input
          style="width: 260px;"
          placeholder="输入设备编号搜索"
          v-model="searchText"
          @keypress.native.enter="handleSearch"
          @input="clearSearch"
        />
        <el-button
          @click="handleSearch"
          type="primary"
          style="margin-left: 10px;"
        >
          <i class="el-icon-search"></i>
          搜索
        </el-button>
      </div>
      <el-button
        type="primary"
        @click="openAddDialog"
      >
        <i class="el-icon-plus"></i>
        添加设备
      </el-button>
    </div>
    <el-table :data="deviceList" border stirpe class="m-t-b" v-loading="loading">
      <el-table-column label="设备编号" prop="equipmentNumber"></el-table-column>
      <el-table-column label="类型">
        <template slot-scope="scope">
          {{scope.row.equipmentType == 1 ? '手坏' : '其它'}}
        </template>
      </el-table-column>
      <el-table-column label="创建时间" prop="createDate"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            circle
            icon="el-icon-edit"
            @click="openEditDialog(scope.row)"
          ></el-button>
          <el-button
            type="danger"
            circle
            icon="el-icon-delete"
            @click="deleteDevice(scope.row)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      class="flex m-t-b"
      :page-size="pageSize"
      layout="prev, pager, next"
      @current-change="handlePagi"
      :total="total">
    </el-pagination>

    <el-dialog :title="dialogTitle" :visible.sync="showDialog">
      <el-form :model="device" label-position="top" ref="device" :rules="rules">
        <el-form-item label="设备编号" prop="equipmentNumber">
          <el-input v-model="device.equipmentNumber" />
        </el-form-item>
        <el-form-item label="类型">
          <el-radio-group v-model="device.equipmentType">
            <el-radio
              v-for="item in types"
              :key="item.value"
              :label="item.value"
            >{{item.label}}</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <el-button
        type="primary"
        @click="saveDeviceInfo"
        :loading="addLoading"
      >保存</el-button>
    </el-dialog>
  </div>
</template>
<script>
import {
  getDeviceNoPagi,
  createDeviceNo,
  updateDeviceNo,
  deleteDeviceNo
} from '../api/version2';
import {
  formatDate
} from '../util/index';
export default {
  name: 'Device',
  data () {
    return {
      total: 0,
      loading: false,
      pageSize: 10,
      addLoading: false,
      dialogTitle: '添加设备编号',
      showDialog: false,
      deviceList: [],
      device: {
        equipmentNumber: '',
        equipmentType: 1
      },
      searchText: '',
      deviceId: '',

      types: [
        { label: '手坏', value: 1 }
      ],
      rules: {
        equipmentNumber: [
          { required: true, message: '设备编号不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    fetchDeviceNos (index) { // 分页事件
      this.loading = true;
      getDeviceNoPagi({
        index,
        count: this.pageSize,
        queryParam: {
          equipmentNumber: this.searchText || null
        }
      })
      .then(res => {
        this.loading = false;
        let list = res.data.data.list || [];
        list.forEach(item => {
          item.createDate = formatDate(item.createDate, 'zh:')
        });
        this.deviceList = list;
        this.total = res.data.data.totalRecord
      })
      .catch(e => {
        this.loading = false
      })
    },
    openEditDialog (row) { // 打开修改弹出框
      this.device.equipmentNumber = row.equipmentNumber;
      this.device.equipmentType = row.equipmentType;
      this.deviceId = row.equipmentNumberId;
      this.dialogTitle = '修改设备编号';
      this.showDialog = true
    },
    deleteDevice (row) { // 删除编号
      this.$confirm(`确定删除该设备吗?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      .then(r => {
        deleteDeviceNo(row.equipmentNumberId)
        .then(res => {
          this.$message.success('删除成功');
          this.fetchDeviceNos(1)
        })
        .catch(e => {

        })
      })
      .catch(err => {})
    },
    handleSearch () { // 搜索事件
      if (!this.searchText.trim()) {
        return this.$message.error('请输入有效搜索内容')
      };
      this.fetchDeviceNos(1)
    },
    clearSearch () { // 清除搜索
      if (!this.searchText) {
        this.fetchDeviceNos(1)
      }
    },
    handlePagi (page) { // 分页事件
      this.fetchDeviceNos(page)
    },
    openAddDialog () { // 打开添加弹出框
      this.device.equipmentNumber = '';
      this.device.equipmentType = 1;
      this.dialogTitle = '添加设备编号';
      this.showDialog = true
    },
    saveDeviceInfo () { // 保存设备
      this.$refs.device.validate(valid => {
        if (valid) {
          this.addLoading = true
          if (this.dialogTitle === '添加设备编号') {
            createDeviceNo(this.device)
            .then(res => {
              this.addLoading = false;
              this.showDialog = false;
              this.$message.success('添加成功');
              this.fetchDeviceNos(1)
            })
            .catch(e => {
              this.addLoading = false
            })
          } else {
            updateDeviceNo({
              equipmentNumberId: this.deviceId,
              ...this.device
            })
            .then(res => {
              this.addLoading = false;
              this.showDialog = false;
              this.$message.success('修改成功');
              this.fetchDeviceNos(1)
            })
            .catch(e => {
              this.addLoading = false
            })
          }
        } else {
          return false
        }
      })
    }
  },
  created () {
    this.fetchDeviceNos(1)
  }
}
</script>
<style lang="scss">

</style>
